<template>
    <div class="header">个人中心</div>
    <div class="user-info">
        <div>
            <img src="../../assets/2.jpg" class="user-header"/>
            <p>程律师</p>
        </div>
    </div>
    <div class="info-classlfy">
        <p class="title">我的案件</p>
        <div class="a">
            <div class="b">
                <p>5</p>
                <p>全部案件</p>
            </div>
            <div class="b">
                <p>0</p>
                <p>进行中</p>
            </div>
            <div class="b">
                <p>2</p>
                <p>已完成</p>
            </div>
            <div class="b">
                <p>10</p>
                <p>我收藏的</p>
            </div>
        </div>
    </div>
    <div class="list-todo">
        <van-cell title="我的案件" is-link />
        <van-cell title="个人信息" is-link />
        <van-cell title="收藏" is-link />
        <van-cell title="文件夹" is-link />
        <van-cell title="帮助中心" is-link />
        <van-cell title="设置" is-link />
        <p class="exitlogin" @click="exitlogin">退出登录</p>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
function exitlogin() {
    router.push('/login')
}
</script>


<style scoped lang="less">

.header{
    width:100%;
    height:60px;
    color:white;
    background:#5A63AE;
    display:flex;
    align-items: center;
    justify-content: center
}
.user-info{
    width:100%;
    height:120px;
    background:#5A63AE;
    padding:20px;
    color:white;
    box-sizing: border-box;
    &>div{
        display:flex;
        align-items: center;
    }
    img{
        width:50px;
        height:50px;
        border-radius:50%;
        margin-right:20px;
    }
}

.info-classlfy{
    background:white;
    padding:15px;
    border-radius:10px;
    position: absolute;
    width:100%;
    top:160px;
    width:calc(100% - 60px);
    left:50%;
    transform: translate(-50%,0);
    box-shadow: 0px 0px 20px #f2f2f2;
    .title{
        font-weight:bold;
        margin-bottom:15px;
    }
    .a{
        display:flex;
        justify-content: space-between;
        .b{
            text-align: center;
            p{
                &:first-child{
                    font-weight:bold;
                    font-size:25px;
                }
                &:last-child{
                    font-size:16px;
                }
            }
            
        }
    }
}

.list-todo{
    padding-top:140px;
    background:white;
}
/deep/.van-cell{
    padding:15px;
    font-size:18px;
}
/deep/.van-cell{
    height:60px;
    padding:0 15px;
    display:flex;
    align-items: center;
}
.exitlogin{
    height:60px;
    padding:0 15px;
    display:flex;
    align-items: center;
}
</style>